<template>
	<view class="page" :style="{'height':height+'px'}">
		<!-- 固定在顶部的导航栏 -->
		<uni-nav-bar  
            fixed="true"
			background-color="transparent"
			title="远仁科技">
		</uni-nav-bar>
		<image class="backgroundImage" src="/static/img/loginBack.png" mode="aspectFit"></image>
		<image class="logo" src="/static/logo.png"></image>
		<view class="form">
			<view class="formInput">
				<view class="formInput__left">
					<image class="formInput__img" src="/static/icon/user.png" mode="aspectFit"></image>
				</view>
				<input class="formInput__field" type="text" confirm-type="next" :value="userName" :focus="focus.userName" @input="bindUserName" @tap="focus.userName=true" @confirm="focus.userName=false;focus.userPwd=true;" @blur="focus.userName=false;" placeholder="请输入用户名/手机号"/>
				<view class="uni-icon uni-icon-clear" v-if="showClearUserName" @click="clearIcon"></view>
			</view>
			<view class="formInput">
				<view class="formInput__left">
					<image class="formInput__img" :src="is_pwd ? '/static/icon/pwd.png' : '/static/icon/user.png'" mode="aspectFit"></image>
				</view>
				<input class="formInput__field" type="text" :password="is_pwd ? showUserPwd : false" v-model="userPwd" :focus="focus.userPwd" @tap="focus.userPwd=true" @confirm="sendLogin" @blur="focus.userPwd=false;" :placeholder="is_pwd ? '请输入密码' : '请输入验证码'"/>
				<view v-if="is_pwd" class="uni-icon uni-icon-eye" :class="[showUserPwd ? '' : 'uni-active']" @click="showUserPwd=!showUserPwd"></view>
				<view v-if="is_pwd" class="formInput__helper" @tap="messageTxt = '请联系管理员重置密码'">
					忘记密码？
				</view>
                <view v-else class="formInput__code" @tap="sendCode">
					{{ inputCheckCode }}
				</view>
			</view>
		</view>
		<view class="pageTips" :class="{'pageTips--error': messageTxt == '请联系管理员重置密码'}">
			{{messageTxt}}
		</view>
		<button class="btn--login" type="primary" :loading="btnLoading" @tap="sendLogin">登陆</button>
        <view class="loginLink">
            <view class="loginLink__item" @tap="routerTo('/pages/article/detail/detail?id=1242142')">用户协议</view>
            <view class="loginLink__item" @tap="pwdOrCode">{{is_pwd ? '验证码登录' : '账号密码登录'}}</view>
        </view>
		<view class="version">当前版本：v0.0.1</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar.vue';

	import {
		router,
        regPhone,
        toast
	} from '@/common/util.js';
    
    export default {
		components:{
			uniNavBar,
		},
        data() {
            return {
				height: 0,
				focus: {
					"userName": false,
					"userPwd": false,
				},
				userName: "",				// 用户名
				showClearUserName: false,	// 显示清空按钮
				userPwd: "",			// 密码
				showUserPwd: true,			// 显示密码
                inputCheckCode: '获取验证码',
				btnLoading: false,			// 按钮登陆状态
				messageTxt: "账号请联系管理员获取。\n新用户默认密码123456，请及时修改。",	// 错误提示
                is_pwd: true
            };
        },
        methods: {
            bindUserName: function (e) {
				this.userName = e.target.value;
				this.userPwd = "";
				if (e.target.value.length > 0) {
					this.showClearUserName = true;
				} else {
					this.showClearUserName = false;
				}
			},
			clearIcon: function(){
				this.userName = "";
				this.userPwd = "";
				this.showClearUserName = false;
			},
			pwdOrCode: function(){
				this.userPwd = "";
				this.is_pwd = !this.is_pwd;
			},
            sendCode: function(){
                if (this.inputCheckCode != '获取验证码' && this.inputCheckCode != '重新发送验证码') {
                    toast.show("操作过于频繁！");
                    return;
                }
                //校验手机号码
                if (!regPhone(this.userName)) {
                    toast.show("手机号码错误！");
                    return;
                }
                var than = this;
                var inputCheckCodeNum = 60;
				// this.secCodekey = res.result.data.secCode_key;
				than.inputCheckCode = inputCheckCodeNum + 's后重新发送';
				//倒计时
				var clock = setInterval(function() {
					inputCheckCodeNum--;
					than.inputCheckCode = inputCheckCodeNum + 's后重新发送';
					if (inputCheckCodeNum < 0) { //当倒计时小于0时清除定时器
						clearInterval(clock);
						than.inputCheckCode = '重新发送验证码';
						inputCheckCodeNum = 60;
					}
				}, 1000);
            },
            sendLogin: function(){
                console.log({userName: this.userName, pwd: this.userPwd});
                router.navigateBack();
            },
            routerTo: function(link){
                router.navigateTo(link);
            }
        },
		onLoad() {
			this.height = uni.getSystemInfoSync().windowHeight;
		},
		onShow() {
			if(this.userName!=""){
				this.showClearUserName = true;
			}
		}
    }
</script>

<style lang="scss">
    @import "@/style/mixin/flex.scss";
    @import "@/style/page/form.scss";
    @import "@/style/page/btn.scss";
    
	.page{
		background-size: 100%;
	}

    .backgroundImage{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index:-1;
        width: 100%;
        height: 100%;
    }
	
	.logo{
        position: absolute;
        top: 255upx;
        left: 300upx;
		width: 150upx;
		height: 150upx;
	}
	
	.form{
		padding: 700upx 100upx 0;
	}
	
	.pageTips{
		padding: 0 100upx 20upx;
        height: 80upx;
        font-size: 22upx;
        color: $uni-color-warning;
        text-align: left;
        line-height:40upx;
        
        &--error{
            color: $uni-color-error;
        }
	}
    
    .loginLink{
        padding: 0 100upx;
        @include flex(between);
        
        &__item{
            color: $uni-color-primary;
            font-size: 20upx;
        }
    }

	.version{
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 1;
		padding: 32upx;
		color: #888;
		font-size: 20upx;
	}
</style>
